<template>
	<view class="body">
		<view class="search">
			<view class="input">
				<input type="text" placeholder="请输入关键字查询" v-model="queryForm.keyWord" @input="handleInputSearch" />
				<u-icon name="search" color="#999" size="28"></u-icon>
			</view>
		</view>
		<view class="list">
			<view class="li" v-for="item,index in 3" :key="index">
				<view class="left">
					<image src="/static/aidex/login/login-bg2.png" mode=""></image>
				</view>
				<view class="right">
					<view class="top">
						<view class="title">一叠文件</view>
						<view class="size"><text>收件人：</text>杜苏芮</view>
					</view>
					<view class="center">
						<text>{{item.pickup_location}}</text>
						<text class="line">至</text>
						<text>{{item.delivery_location}}</text>
					</view>
					<view class="bottom">
						<view class="text"><text>完成时间：</text>{{moment(item.pickup_time).format("YYYY-MM-DD")}}</view>
						<view class="price">￥{{item.reward_amount}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from '@/common/moment';
	export default {
		data() {
			return {
				queryForm: {
					pageNo: 1,
					pageSize: 10,
					keyWord: "",
				},
			}
		},
		onLoad(options) {
			this.getList()
		},
		methods: {
			moment,
			//获取列表
			getList() {
				// this.$Api.getRewardList(this.queryForm).then(res => {
				// 	// console.log('获取列表', res)
				// 	this.recordList = res.data.result
				// }, err => {
				// 	console.log(err)
				// })
			},
			//输入框搜索
			handleInputSearch(e) {
				this.queryForm.keyWord = e.detail.value
				this.queryForm.pageNo = 1
				this.queryForm.pageSize = 10
				this.list = []
				this.getList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		.search {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30upx 4%;
			background: #fff;
			border-bottom: 1px solid #e5e5e5;
			position: fixed;
			left: 0;
			z-index: 99;

			.input {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex: 1;
				background: rgba(205, 205, 205, 0.3);
				border-radius: 60upx;
				padding: 18upx;

				input {
					flex: 1;
					font-size: 28upx;
					margin-left: 20upx;
				}
			}
		}

		.list {
			width: 94%;
			margin: 0 auto;
			padding-top: 22%;

			.li {
				width: 100%;
				background: #fff;
				border-radius: 20upx;
				padding: 30upx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-bottom: 30upx;

				.left {
					width: 140upx;
					height: 140upx;
					border-radius: 10upx;
					overflow: hidden;
					flex-shrink: 0;

					image {
						width: 100%;
						height: 100%;
						display: block;
						margin: 0 auto;
					}
				}

				.right {
					flex: 1;
					margin-left: 30upx;

					.top {
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 2upx solid #e5e5e5;
						padding-bottom: 10upx;

						.title {}

						.size {
							text {
								color: #999;
							}
						}
					}

					.center {
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 2upx solid #e5e5e5;
						margin: 10upx 0;
						padding-bottom: 10upx;

						text {
							color: #414141;
						}

						.line {
							color: #999;
							margin: 0 10upx;
						}
					}

					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.text {
							text {
								color: #999;
							}
						}

						.price {
							color: #ff0000;
							font-size: 32upx;
						}
					}
				}
			}
		}
	}
</style>